<template>
  <div class="layer">
    <div class="layer-bg"></div>
    <div class="login-layer f">
      <div class="login-cover"></div>
      <el-form :model="loginData" :rules="rules" ref="loginData">
        <h3 class="admin-title">管理系统</h3>
        <p class="admin-details">一个简约的管理系统</p>
        <el-form-item prop="account">
          <el-input v-model="loginData.account" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginData.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-button type="primary" @click="loginBtn('loginData')" style="width:100%;">登录</el-button>
        <div class="login-operation">
          <a href="javascript:;" @click="$refs.openRegistered.openDialog('立即注册')">立即注册</a>
          <em>丨</em>
          <a href="javascript:;">忘记密码</a>
        </div>
      </el-form>
    </div>
    <!-- 注册 -->
    <registered ref="openRegistered" @submit="ceshi"></registered>
  </div>
</template>

<script>
import registered from "./dialogs/registered.vue"
import publicData from "@A/mixins/publicData";
export default {
  name: "login-index",
  mixins: [ publicData ],
  components: {
    registered
  },
  data() {
    return {
      loginData: {
        account: '',
        password: ''
      },
      rules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' }
        ],
      }
    };
  },
  mounted() {},
  methods: {
    // 登录
    loginBtn(loginData){
      this.$refs[loginData].validate((valid) => {
        if (valid) {
          let userInfo = {
            name: '哈哈'
          }
          localStorage.setItem("userInfo", JSON.stringify(userInfo));
          
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    ceshi(val){
      alert(val)
    }
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.layer {
  width: 100%;
  min-height: 100%;

  .layer-bg{
    width: 5000px;
    height: 5000px;
    border-radius: 50%;
    background: radial-gradient(62.61% 62.61% at 95.23% 6.02%, #160E71 0%, rgba(19, 13, 92, 0.26) 54.71%, rgba(90, 35, 248, 0) 100%), linear-gradient(72.48deg, #EF516D 2.61%, rgba(106, 103, 227, 0) 56.18%), radial-gradient(45.23% 45.23% at 35.11% -11.02%, #7936AE 0%, rgba(121, 54, 174, 0) 100%), radial-gradient(94.51% 124.88% at 94.32% 94.43%, rgba(65, 244, 255, 0.78) 0%, rgba(131, 218, 255, 0.6552) 32.29%, rgba(99, 175, 240, 0.3978) 64.06%, rgba(43, 90, 211, 0) 100%), linear-gradient(313.04deg, #341D65 0.93%, #604AEA 125.68%);
    background-blend-mode: normal, normal, normal, normal, normal, normal;
    filter: blur(50px);
    -webkit-filter: blur(50px);
    position: fixed;
    top: -200%;
    left: -200%;
    transform: translate(-50%,-50%);
    animation: colorOne 6s linear infinite
  }

  @keyframes colorOne {
    0%{
      transform: rotate(0);
    }
    100%{
      transform: rotate(-360deg);
    }
  }


  .login-layer{
    width: 750px;
    min-height: 360px;
    background: #fff;
    border-radius: 20px;
    padding: 36px;
    box-sizing: border-box;
    box-shadow: 5px 9px 17px rgba(102,102,102,.4);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: all .3s;
    &:hover{
      top: 48%;
      transition: all .3s;
      box-shadow: 5px 9px 17px rgba(102,102,102,.75);
    }
    .login-cover{
      width: 360px;
      height: auto;
      background: url(../../assets/img/login-cover.png) no-repeat;
      background-size: 60%;
      background-position: center center;
      flex-shrink: 0;
    }
    .el-form{
      width: 100%;
      height: 100%;
      .admin-title{
        width: 100%;
        color: #000;
        font-size: 24px;
        line-height: 36px;
      }
      .admin-details{
        width: 100%;
        color: rgba(0,0,0,.8);
        font-size: 12px;
        line-height: 24px;
        margin: 10px 0 20px;
      }
      .login-operation{
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        a{
          color: #409EFF;
          font-size: 14px;
          line-height: 36px;
        }
        em{
          color: rgba(0,0,0,.2);
          font-size: 12px;
        }
      }
    }
  }
}
</style>